<template>
  <div class="container">
    <div class="container_page">
      <page-header :title="$t('help_payment')"></page-header>
      <div class="box">
        <div class="deposit_card">
          <div class="amount">
            {{ amount | amountFormats($currencyVal.symbol) }}
          </div>
          <div class="tip flex_center">
            <span> {{ $t('home_for') }}: {{ $t(typeMap[type]) }}</span>
            <img
              v-if="[1, 7, 13].includes(parseInt(type))"
              @click="isShowAmountDetails = true"
              :src="require('@/assets/img/pay/ic_details@2x.png')"
              alt=""
            />
          </div>
        </div>
        <van-radio-group v-model="radioIndex">
          <div class="deposit_ways">
            <div class="deposit_way" @click="showBankPay">
              <div class="addBtn">
                <img :src="require('@/assets/img/pay/add@2x.png')" />
              </div>
              <div class="bank_account">{{ $t('pay_newCardPay') }}</div>
              <img
                style="width: 44px;height: 44px; margin-right: -12px;"
                :src="require('@/assets/img/pay/ic_enter.svg')"
              />
            </div>
            <div
              class="deposit_way"
              :class="{ active: radioIndex == 'a' + index }"
              v-for="(item, index) in paymentMethodInfo.cardList"
              :key="index"
              @click="radioIndex = 'a' + index"
            >
              <img
                :src="
                  bankIconMap[item.bankName.toLowerCase()] ||
                    bankIconMap['default']
                "
              />
              <div class="bank_account">**** **** **** {{ item.bankNo }}</div>
              <van-radio :name="'a' + index"></van-radio>
            </div>
          </div>
          <div class="deposit_ways">
            <!-- <empty-data></empty-data> -->
          </div>
        </van-radio-group>
        <template v-if="isShowGoogle">
          <div id="google-btn" style="padding:0 14px;"></div>
          <div style="height: 18px;"></div>
        </template>
        <template v-if="isShowApple">
          <div id="apple-btn" style="padding:0 14px;"></div>
          <div style="height: 20px;"></div>
        </template>
      </div>
      <bottom-button
        v-if="type == 5"
        :title="$t('home_gotoPay')"
        CheckImg
        @clickText="isDisabled = !$event"
        @click="checkPay(1)"
        @clickAgreement="clickAgreement"
        :disabled="isDisabled"
        background="var(--card-bg)"
      >
      </bottom-button>
      <bottom-button
        v-else
        :title="$t('home_gotoPay')"
        @click="checkPay(1)"
        background="var(--page-bg)"
      >
      </bottom-button>
      <!-- 订单详情 -->
      <van-dialog
        v-model="isShowAmountDetails"
        :showConfirmButton="false"
        closeOnClickOverlay
      >
        <div class="dialog_box" v-if="orderInfo">
          <div
            class="dialog_row discount"
            v-if="orderInfo.plateCouponAmount > 0"
          >
            <img
              style="width: 14px;height: 14px;"
              :src="require('@/assets/img/order/ic_coupon@2x.png')"
            />
            <div>
              <span class="key">{{ $t('order_discount') }}</span>
              <span class="value">
                {{
                  orderInfo.plateCouponAmount
                    | amountFormats($currencyVal.symbol)
                }}</span
              >
            </div>
          </div>
          <div class="dialog_row">
            <div class="row">
              <span class="key">{{ $t('order_orderID') }}: </span>
              <span class="value">{{ orderInfo.orderNo }}</span>
            </div>
            <div class="row">
              <span class="key">{{ $t('order_rentalDate') }}: </span>
              <span class="value">{{ orderInfo.createTime | dateformat }}</span>
            </div>
            <div class="row" v-if="orderInfo.endTime && type == 1">
              <span class="key">{{ $t('order_retrurnDate') }}:</span>
              <span class="value">{{ orderInfo.endTime | dateformat }}</span>
            </div>
            <div class="row">
              <span class="key">{{ $t('home_duration') }}: </span>
              <span class="value" v-if="orderInfo.useDuration">{{
                getDuration(orderInfo.useDuration * 1000)
              }}</span>
              <span class="value" v-else>{{
                getDuration(Date.now() - orderInfo.createTime)
              }}</span>
            </div>
            <div class="row">
              <span class="key">{{ $t('order_orderAmount') }}: </span>
              <span class="value">
                {{
                  orderInfo.orderAmount | amountFormats($currencyVal.symbol)
                }}</span
              >
            </div>
            <div class="row" v-if="taxAmount > 0">
              <span class="key">{{ $t('order_tax') + tax + '%' }}: </span>
              <span class="value">
                {{ taxAmount | amountFormats($currencyVal.symbol) }}</span
              >
            </div>
            <div class="row">
              <span class="key"
                >{{
                  taxAmount > 0
                    ? $t('order_pay_include_tax')
                    : $t('order_paymentAmount')
                }}:
              </span>
              <span class="value">
                {{ amount | amountFormats($currencyVal.symbol) }}</span
              >
            </div>
          </div>
          <div class="dialog_row" v-if="orderInfo">
            <div class="title">{{ $t('order_pricePlan') }}</div>
            <div class="key" v-if="orderInfo.billing.isSystem">
              {{ $t('FREE_USAGE') }}
            </div>
            <div class="key" v-else>
              <span v-if="orderInfo.billing.freeDuration">{{
                $t('billingRules1')
                  .replace(
                    '$order',
                    orderInfo.billing.freeLimit > 0
                      ? $t(`First_order${orderInfo.billing.freeLimit}`)
                      : $t('Every_order')
                  )
                  .replace('$freeDuration', orderInfo.billing.freeDuration)
                  .replace(
                    '$times1',
                    orderInfo.billing.freeDurationControlType == 1
                      ? orderInfo.billing.freeDuration > 1
                        ? $t('minute3')
                        : $t('minute2')
                      : orderInfo.billing.freeDurationControlType == 2
                      ? orderInfo.billing.freeDuration > 1
                        ? $t('hour4')
                        : $t('hour3')
                      : orderInfo.billing.freeDuration > 1
                      ? $t('days')
                      : $t('day')
                  )
              }}</span>
              <span
                >{{
                  $t('billingRules2')
                    .replace(
                      '$thereafter',
                      orderInfo.billing.freeDuration ? $t('thereafter') : ''
                    )
                    .replace(/\s+$/, '')
                    .replace('$amount', formatMoney(orderInfo.billing.amount))
                    .replace('$cycle', orderInfo.billing.cycle)
                    .replace(
                      '$times2',
                      orderInfo.billing.controlType == 1
                        ? orderInfo.billing.cycle > 1
                          ? $t('minute3')
                          : $t('minute2')
                        : orderInfo.billing.controlType == 2
                        ? orderInfo.billing.cycle > 1
                          ? $t('hour4')
                          : $t('hour3')
                        : orderInfo.billing.cycle > 1
                        ? $t('days')
                        : $t('day')
                    )
                }}{{
                  orderInfo.billing.dayAmount
                    ? $t('punctuation1')
                    : $t('punctuation2')
                }}</span
              >
              <span v-if="orderInfo.billing.dayAmount">{{
                $t('billingRules3').replace(
                  '$dayAmount',
                  formatMoney(orderInfo.billing.dayAmount)
                )
              }}</span>
              <span v-if="orderInfo.billing.penaltyAmount">{{
                $t('billingRules4')
                  .replace(
                    '$penaltyAmount',
                    formatMoney(orderInfo.billing.penaltyAmount)
                  )
                  .replace(
                    '$maxRentDuration',
                    orderInfo.billing.maxRentDuration
                  )
                  .replace(
                    '$times3',
                    orderInfo.billing.maxDurationControlType == 1
                      ? orderInfo.billing.maxRentDuration > 1
                        ? $t('minute3')
                        : $t('minute2')
                      : orderInfo.billing.maxDurationControlType == 2
                      ? orderInfo.billing.maxRentDuration > 1
                        ? $t('hour4')
                        : $t('hour3')
                      : orderInfo.billing.maxRentDuration > 1
                      ? $t('days')
                      : $t('day')
                  )
              }}</span>
            </div>
          </div>
        </div>
      </van-dialog>
      <!-- 银行卡支付 -->
      <van-popup
        v-model="isShowBankPay"
        :close-on-click-overlay="false"
        closeable
        round
        position="bottom"
      >
        <div class="bank_pay_popup">
          <div class="title">{{ $t('pay_payByCard') }}</div>
          <div class="su_title">{{ $t('pay_enterBankCard') }}</div>
          <div class="stripe_card">
            <div id="payment-element"></div>
          </div>
          <div
            class="su_title bind_tip"
            v-if="walletInfo.cardList && walletInfo.cardList.length == 0"
          >
            <img
              :src="
                isBindCard
                  ? require('@/assets/img/login/login_ic_check_selected.svg')
                  : require('@/assets/img/login/login_ic_check_unselected.svg')
              "
              alt=""
              style="width: 15px;height: 15px; margin-right: 5px;"
              @click.prevent="isBindCard = !isBindCard"
            />
            <span @click.prevent="isBindCard = !isBindCard">{{
              $t('pay_addCardToWallet')
            }}</span>
          </div>
          <van-button
            class="btn"
            round
            type="info"
            size="large"
            @click="checkPay(2)"
          >
            {{ $t('home_gotoPay') }}
          </van-button>
        </div>
      </van-popup>
      <!--加载脚本提示 -->
      <van-dialog v-model="isShowLoadError" :showConfirmButton="false">
        <div class="brief" style="padding-top: var(--gap);">
          {{ $t('error_netError') }}
        </div>
        <div class="btns">
          <div class="btn flex_center" @click="isShowLoadError = false">
            {{ $t('profile_cancel') }}
          </div>
          <div class="btn flex_center" @click="refesh">
            {{ $t('home_confirm') }}
          </div>
        </div>
      </van-dialog>
      <!--免单提示 -->
      <van-dialog v-model="isShowFree" :showConfirmButton="false">
        <div class="brief" style="padding-top: var(--gap);">
          {{ $t('free_tip') }}
        </div>
        <div class="btns">
          <div class="btn flex_center" @click="isShowFree = false">
            {{ $t('profile_cancel') }}
          </div>
          <div class="btn flex_center" @click="toFreePay">
            {{ $t('home_confirm') }}
          </div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import $api from '@/assets/js/api/index'
import $login from '@/assets/js/api/login'
import share from '@/mixins/share'
import { debounce } from '@/assets/js/util'
import { loadStripe } from '@stripe/stripe-js'
export default {
  mixins: [share],
  data () {
    return {
      isShowBankPay: false,
      bankIconMap: {
        visa: require('@/assets/img/bank/visa1.png'),
        master: require('@/assets/img/bank/mastercard@2x.png'),
        mastercard: require('@/assets/img/bank/mastercard@2x.png'),
        maestro: require('@/assets/img/bank/Maestro.png'),
        unionpay: require('@/assets/img/bank/unionpay@2x.png'),
        mnp: require('@/assets/img/bank/Group 216.png'),
        jcb: require('@/assets/img/bank/jcb.png'),
        default: require('@/assets/img/bank/default.png')
      },
      // 这个看支付接口的状态
      typeMap: {
        1: 'pay_rental', //租金
        5: 'wallet_deposit', //押金
        7: 'pay_powerbank', //充电宝  //报失
        13: 'pay_powerbank' //充电宝  //购买
      },
      type: '', //流水类型,
      orderNo: '',
      amount: '',
      radioIndex: '-1',
      isShowAmountDetails: false,
      walletInfo: {
        deposit: '',
        cardList: []
      },
      orderInfo: null,
      paymentMethodInfo: {
        cardList: []
      },
      elements: null,
      paymentElement: null,
      btnElements: null,
      isBindCard: false,
      actionType: 'back',
      isShowLoadError: false,
      stripe: null,

      isDisabled: false,
      epositUrls: '',
      isFree: false,
      isShowFree: false,
      flag: 1, // 1 绑卡支付 2输卡号支付
      tax: 0,
      taxAmount: 0,
      isShowGoogle: true,
      isShowApple: true
    }
  },
  created () {
    this.getLang()
  },
  methods: {
    checkPay (flag) {
      this.flag = flag
      if (this.isFree) {
        this.isShowFree = true
        return
      }
      if (
        flag == 1 &&
        (this.paymentMethodInfo.cardList.length == 0 || !this.currentBankInfo)
      ) {
        this.global.toast(this.$t('home_selPaymentMethod'))
        return
      }

      this.choosePay()
    },
    choosePay () {
      const flag = this.flag
      // 绑卡支付
      if (flag == 1) this.toBindPay()
      // 输入卡号支付
      if (flag == 2) this.toBankPay()
    },
    async toPay ({
      params,
      bankNo = '',
      isOtherBtnClick = false,
      isBindCard = false,
      btnType = ''
    }) {
      const res = await $api.user.toPay(params)
      if (res.code != '0') {
        this.global.toast(res.message)
        return
      }

      // 支付失败或成功
      if (res.data.success != 3) {
        let payResult = {
          orderNo: res.data.orderNo || this.orderNo,
          type: this.type,
          success: res.data.success,
          failedReason: res.data.failedReason,
          paymentMethod: res.data.paymentMethod,
          amount: res.data.amount,
          bankNo: bankNo,
          payOrderNo: res.data.payOrderNo,
          tax: this.tax,
          taxAmount: this.taxAmount,
          isFree: this.isFree ? 1 : 2 //1 免单
        }
        localStorage.setItem('pay_result', JSON.stringify(payResult))

        this.$router.replace({ path: '/pay/result' })

        return
      }

      this.$store.commit('startLoading')
      try {
        // 校验确认
        const { paymentIntent, error: payEroor } = isOtherBtnClick
          ? await this.stripe.confirmPayment({
              elements:
                btnType == 'Google'
                  ? this.btnGoogleElements
                  : this.btnAppleElements,
              clientSecret: res.data.clientSecret,
              // confirmParams: {
              //   // Return URL where the customer should be redirected after the PaymentIntent is confirmed.
              //   return_url: "https://595p6132a1.vicp.fun/#/pay/result"
              // },
              redirect: 'if_required'
            })
          : await this.stripe.confirmCardPayment(
              res.data.clientSecret,
              isBindCard
                ? {}
                : {
                    payment_method: {
                      card: this.paymentElement
                    }
                  }
            )
        let obj = {}
        let payResult = {
          orderNo: res.data.orderNo,
          type: this.type,
          success: 1, //1 成功 2失败
          failedReason: '',
          paymentMethod: 1,
          amount: res.data.amount,
          bankNo: bankNo,
          payOrderNo: res.data.payOrderNo,
          tax: this.tax,
          taxAmount: this.taxAmount,
          isFree: this.isFree ? 1 : 2 //1 免单
        }
        if (payEroor) {
          payResult.failedReason = payEroor.message
          payResult.success = 2
        } else {
          if (paymentIntent.status != 'failed') {
            let descriptionArr = paymentIntent.description
              .split(',')
              .map(item => item.split(':'))
            descriptionArr.forEach(item => {
              obj[item[0]] = item[1]
            })
            payResult.orderNo = obj.orderNo
            payResult.success = 1
          } else {
            payResult.failedReason = paymentIntent.description
            payResult.success = 2
          }
        }
        this.$store.commit('endLoading')
        localStorage.setItem('pay_result', JSON.stringify(payResult))
        this.$router.replace({ path: '/pay/result' })
      } catch (e) {
        // console.log(e)
        this.global.toast(e)
        this.$store.commit('endLoading')
      }
    },

    clickAgreement () {
      if (!this.epositUrls) return
      localStorage.setItem(
        'webUrl',
        JSON.stringify({
          url: `${this.epositUrls}?lang=${this.$store.state.locale}`,
          title: 'text_depositAgreement'
        })
      )
      this.$router.push({
        path: '/web-view'
      })
    },
    //获取配置数据
    getConfigs () {
      $login.getConfigs(true).then(res => {
        if (res.code == 0) {
          localStorage.setItem('configs', JSON.stringify(res.data))
          res.data.forEach(item => {
            if (item.key == 'prepayment-policy') {
              this.epositUrls = item.value
            }
          })
        }
      })
    },
    refesh () {
      window.location.reload()
    },
    getWallet () {
      return $api.user.getWallet().then(res => {
        if (res.code != '0') {
          this.global.toast(res.message)
          return
        }
        this.walletInfo = res.data
        this.amount = res.data.requirePrepaymentAmount
      })
    },
    getOrderDetails () {
      return $api.order.getDetails({ orderNo: this.orderNo }).then(res => {
        if (res.code != '0') {
          this.global.toast(res.message)
          return
        }
        this.orderInfo = res.data
        if ([7, 13].includes(parseInt(this.type))) {
          this.amount = res.data.billing.penaltyAmount
        }
      })
    },
    getPaymentMethod () {
      const param = { type: this.type, amount: this.amount }
      return $api.user.getPaymentMethod(param).then(res => {
        if (res.code != '0') {
          this.global.toast(res.message)
          return
        }
        this.paymentMethodInfo = res.data
      })
    },
    // 绑卡支付
    toBindPay: debounce(function () {
      let params = {
        orderNo: this.orderNo,
        payType: 0,
        bankcardId: this.currentBankInfo.id,
        type: this.type,
        paymentChannel: 'stripe'
      }
      this.toPay({
        params,
        bankNo: this.currentBankInfo.bankNo,
        isBindCard: true
      })
    }),
    // 苹果，谷歌支付
    async otherPayBtnClick (event, type) {
      // console.log(type)
      let expressPaymentType = event.expressPaymentType
      const { error: submitError } =
        type == 'Google'
          ? await this.btnGoogleElements.submit()
          : await this.btnAppleElements.submit()
      if (submitError) {
        this.global.toast(submitError.message, 5000)
        return
      }
      let params = {
        orderNo: this.orderNo,
        type: this.type,
        paymentChannel: 'stripe',
        paymentTokenObject: '',
        payType: ''
      }
      if (!params.orderNo) delete params.orderNo
      if (expressPaymentType == 'google_pay') {
        params.payType = 4
      }
      if (expressPaymentType == 'apple_pay') {
        params.payType = 3
      }
      const { error, paymentMethod } = await this.stripe.createPaymentMethod({
        elements:
          type == 'Google' ? this.btnGoogleElements : this.btnAppleElements
      })

      if (error) {
        this.global.toast(error.message, 5000)
        return
      }
      params.paymentTokenObject = paymentMethod.id
      this.toPay({ params, isOtherBtnClick: true, btnType: type })
    },
    //输卡号支付
    toBankPay: debounce(async function () {
      this.$store.commit('startLoading')
      try {
        const { token, error } = await this.stripe.createToken(
          this.paymentElement
        ) //校验并获取卡信息
        if (error) {
          this.global.toast(error.message, 5000)
          this.$store.commit('endLoading')
          return
        }
        const paypParams = {
          bankExpire: token.card.exp_month + '/' + token.card.exp_year, //卡日期
          bankName: token.card.brand, //银行名称
          bankNo: token.card.last4, //银行卡号
          bankType: token.card.funding, //卡的类型
          token: token.id, //卡token
          defaulted: 0,
          save: false,
          paymentChannel: 'stripe', // 支付渠道
          postalCode: token.card.address_zip, // 邮编
        }
        // 是否绑卡
        if (this.isBindCard) {
          paypParams.save = true
          // $api.user.bindBankCard(paypParams).then(res => {
          //   if (res.code == '21505') return
          //   if (res.code != '0') {
          //     this.global.toast(res.message)
          //     return
          //   }
          // })
        }
        const params = {
          type: this.type,
          payType: 1,
          cardToken: paypParams.token,
          bankcardInfo: paypParams,
          orderNo: this.orderNo,
          paymentChannel: 'stripe'
        }
        this.toPay({ params, bankNo: token.card.last4 })
      } catch (e) {
        this.$store.commit('endLoading')
        this.global.toast(e)
      }
    }),

    // 免单支付
    toFreePay: debounce(function () {
      let params = {
        orderNo: this.orderNo,
        payType: -1,
        type: this.type,
        paymentChannel: 'stripe'
      }
      this.toPay({ params })
    }),
    async showBankPay () {
      if (this.isFree) {
        this.isShowFree = true
      } else {
        this.isShowBankPay = true
        this.$nextTick(async () => {
          if (!this.stripe)
            this.stripe = await loadStripe(this.$stripeKye, {
              locale: this.$i18n.locale.toLocaleLowerCase()
            }) //账号密匙key
          // 卡元素
          this.initCardElement(true)
        })
      }
    },
    initCardElement (isMount = false) {
      if (!this.elements) this.elements = this.stripe.elements({})
      if (!this.paymentElement)
        this.paymentElement = this.elements.create('card', {
          hidePostalCode: false,
          disableLink: true,
          style: {
            base: {
              color: '#39404D',
              fontWeight: '500',
              fontSize: '18px',
              fontSmoothing: 'antialiased',
              ':-webkit-autofill': {
                color: '#fce883'
              },
              '::placeholder': {
                color: '#AAAAAC'
              }
            }
          }
        })
      if (isMount) this.paymentElement.mount('#payment-element')
    },
    initGoogleBtn () {
      this.$store.commit('startLoading')
      //快捷支付按钮
      const options = {
        mode: 'payment',
        amount: parseInt(this.amount * 100),
        currency: 'usd',
        paymentMethodCreation: 'manual',
        // Customizable with appearance API.
        appearance: {
          variables: {
            borderRadius: '14px'
          }
        }
      }
      // Set up Stripe.js and Elements to use in checkout form
      this.btnGoogleElements = this.stripe.elements(options)
      // this.btnElements = this.stripe.elements(options);
      const expressCheckoutElement = this.btnGoogleElements.create(
        'expressCheckout',
        {
          layout: {
            maxColumns: 2,
            maxRows: 1
          },
          paymentMethods: {
            googlePay: 'always',
            applePay: 'never',
            link: 'never',
            paypal: 'never',
            amazonPay: 'never'
          },

          buttonTheme: {
            googlePay: 'white',
            applePay: 'white-outline'
          },
          buttonHeight: 55,
          buttonType: {
            googlePay: 'plain'
          }
        }
      )
      expressCheckoutElement.mount('#google-btn')
      expressCheckoutElement.on('ready', event => {
        this.$store.commit('endLoading')
        setTimeout(() => {
          const googleBtn = document.getElementById('google-btn')
          if (googleBtn.offsetHeight < 10) this.isShowGoogle = false
        }, 1000)
      })
      expressCheckoutElement.on('click', event => {
        if (this.isFree) {
          this.isShowFree = true
          return
        }
        event.resolve()
      })
      expressCheckoutElement.on('confirm', e =>
        this.otherPayBtnClick.bind(this)(e, 'Google')
      )
    },
    initAppleBtn () {
      this.$store.commit('startLoading')
      //快捷支付按钮
      const options = {
        mode: 'payment',
        amount: parseInt(this.amount * 100),
        currency: 'usd',
        paymentMethodCreation: 'manual',
        // Customizable with appearance API.
        appearance: {
          variables: {
            borderRadius: '14px'
          }
        }
      }
      // Set up Stripe.js and Elements to use in checkout form
      this.btnAppleElements = this.stripe.elements(options)
      // this.btnElements = this.stripe.elements(options);
      const expressCheckoutElement = this.btnAppleElements.create(
        'expressCheckout',
        {
          layout: {
            maxColumns: 2,
            maxRows: 1
          },
          paymentMethods: {
            googlePay: 'never',
            applePay: 'always',
            link: 'never',
            paypal: 'never',
            amazonPay: 'never'
          },

          buttonTheme: {
            googlePay: 'white',
            applePay: 'white-outline'
          },
          buttonHeight: 55,
          buttonType: {
            googlePay: 'plain'
          }
        }
      )
      expressCheckoutElement.mount('#apple-btn')
      expressCheckoutElement.on('ready', event => {
        this.$store.commit('endLoading')
        setTimeout(() => {
          const appleBtn = document.getElementById('apple-btn')
          if (appleBtn.offsetHeight < 10) this.isShowApple = false
        }, 1000)
      })

      expressCheckoutElement.on('click', event => {
        if (this.isFree) {
          this.isShowFree = true
          return
        }
        event.resolve()
      })
      expressCheckoutElement.on('confirm', e =>
        this.otherPayBtnClick.bind(this)(e, 'Apple')
      )
    },
    //初始化
    async initialize () {
      try {
        this.$store.commit('startLoading')
        if (!this.stripe)
          this.stripe = await loadStripe(this.$stripeKye, {
            locale: this.$i18n.locale.toLocaleLowerCase()
          })

        if (this.amount <= 0) {
          this.$store.commit('endLoading')
          return
        }
        this.initAppleBtn()
        this.initGoogleBtn()
      } catch (e) {
        // console.log(e, 1)
        this.global.toast(e)
        this.$store.commit('endLoading')
        // this.isShowLoadError = true;
      }
    },

    calculatePrice (type, orderNo = '') {
      const params = {
        type,
        orderNo
      }
      if (type == 17) delete params.orderNo
      return $api.order.calculatePrice(params).then(res => {
        if (res.code != '0') {
          this.global.toast(res.message)
          return
        }
        this.amount = res.data.money
        this.isFree = res.data.isFree
        this.tax = res.data.tax
        this.taxAmount = res.data.taxAmount
        this.orderInfo = res.data
      })
    }
  },
  async mounted () {
    this.actionType = localStorage.getItem('actionType') || 'back'
    const { type, orderNo = '' } = this.$route.query || {}
    if (!type || !this.typeMap[type]) {
      this.$router.back()
      return
    }
    this.getConfigs()
    this.type = parseInt(type)
    this.orderNo = orderNo

    if (this.type == 5) await this.getWallet()
    if (orderNo && [1, 7, 13].includes(this.type))
      await this.calculatePrice(type, orderNo)
    await this.getPaymentMethod()
    await this.initialize()
  },
  computed: {
    // 当前选择卡
    currentBankInfo () {
      if (this.radioIndex == -1) return null
      const index = this.radioIndex.slice(1, this.radioIndex.length)
      return this.paymentMethodInfo.cardList[index]
    }
  }
}
</script>
<style scoped lang="scss">
.container_page {
  margin: 0;
  background-color: var(--page-bg);
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.box {
  padding-top: 20px;
  padding-bottom: 118px;
}
.deposit_card {
  background-color: #e7ff55;
  border-radius: 26px;
  margin: 0 var(--gap);
  margin-bottom: 20px;
  padding: 30px 0;
  .amount {
    font-size: 37px;
    font-weight: 700;
    text-align: center;
    color: var(--text-color);
    margin-bottom: 30px;
  }
  .tip {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);

    img {
      width: 16px;
      height: 16px;
      margin-left: 4px;
    }
  }
}
.deposit_way {
  margin: 0 var(--gap);
  margin-bottom: 20px;
  background-color: var(--card-bg);
  padding: 0 var(--gap);
  border-radius: 14px;
  display: flex;
  align-items: center;
  height: 56px;
  // &.active {
  // }
  img {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }
  .addBtn {
    width: 44px;
    height: 44px;
    // background-color: var(--text-color);
    // border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .bank_account {
    flex: 1;
    padding-left: var(--gap);
    font-size: 14px;
    font-weight: 600;

    color: #39404d;
  }
}

.dialog_box {
  .title {
    text-align: left;
    padding: 0;
    margin-bottom: 4px;
  }
  .dialog_row {
    font-size: 13px;
    padding: 20px;
    padding-bottom: 19.5px;
    border-bottom: 0.5px solid #d2d8e2;
    &:last-child(1) {
      border: none;
    }
    .row {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0px;
      }
    }
    .title {
      font-size: 15px;
      font-weight: 600;
      color: #39404d;
      margin-bottom: 4px;
    }
  }
  .discount {
    display: flex;
    align-items: center;
    img {
      margin-right: 6px;
    }
  }
  .key {
    color: #66666b;
    font-weight: 500;
  }
  .value {
    color: #66666b;
    font-weight: 600;
  }
}
.bank_pay_popup {
  padding: 0 var(--gap);
  min-height: 30vh;

  .stripe_card {
    background: #ececee;
    border-radius: 10px;
    padding: 16px 20px;
  }
  .title {
    text-align: center;
    font-weight: 600;
    color: #39404d;
    font-size: 18px;
    padding: 15px;
  }
  .su_title {
    font-weight: 600;
    color: #39404d;
    font-size: 14px;
    padding: 10px;
    color: #39404d;
  }
  .bind_tip {
    display: flex;
    align-items: center;
  }
  .btn {
    margin-top: 100px;
    margin-bottom: var(--gap);
  }
}
.van-popup--bottom {
  border-radius: 30px 30px 0 0;
}
</style>
